<template>
    <div>
        <cu-navbar>
            <block slot="content">预约列表</block>
        </cu-navbar>
        <div style=" padding: 30rpx;background-color: #fff">
            <u-form>
                <u-form-item label-width="80px" label="选择时间" prop="userInfo.bank_username" :borderBottom="false" ref="item1">
                    <div class="date-box" @click="show2 = true">
                        <span v-show="addtime">{{ addtime }}</span>
                        <span v-show="!addtime" style="color: rgb(192, 196, 204);">请选择时间</span>
                    </div>
                </u-form-item>
            </u-form>
        </div>
        
        <div class="page" v-if="list.length">
            <div class="list">
                <div class="item" v-for="item in list">
                    <div class="f-r a-c j-b">
                        <div class="date">{{ item.companyName }}</div>
                        <div class="username f-s">{{ $common.timeToDate(item.createtime * 1000, true) }}</div>
                    </div>
                    <div class="username f-g">{{ item.remark}} {{ item.user_id }}</div>
                    <div class="username f-g">卖出总价 {{ item.sell_total }}</div>
                    <div class="username f-g">买入总价 {{ item.purchase_total }}</div>
                    <div class="username f-g">差额 {{ item.differ_total }}</div>
                  <div style="display: flex;align-items: center">
                    <u-input
                        style="border: 1px solid #eee;margin: 10px 0"
                        v-model="item.number"
                        type="number"
                        :min="1"
                        :max="10"
                        placeholder="请输入数量1-10"/>
                    <div class="button f-s" @click="updateNumber(item)">保存</div>
                  </div>
                </div>
            </div>
        </div>
        <u-calendar v-model="show2" mode="date" @change="changeDate"></u-calendar>

    </div>
</template>

<script>

export default {
    name: "list",
    data() {
        return {
          placeholderStyle: "color: #999;font-size: 28upx;",
            list: [],
            show2: false,
            addtime: new Date().format('yyyy-MM-dd')
        }
    },
    created() {
        this.getList()
    },
    methods: {
        changeDate(e) {
            this.addtime = e.result
            this.getList()
        },
        getList() {
            this.$api.baogezhuyuyuelist({
                addtime: this.addtime
            }).then(res => {
                this.list = res.result.map(el => {
                    return {
                        ...el,
                        number: el.pricemax || 0
                    }
                })
            })
        },
      updateNumber(item) {
        this.$api.updatebaogezhuyuyue({
          booking_id: item.id,
          number: item.number
        }).then(res => {
          if (res.code === 1) {
            this.$common.successToShow(res.reason)
          }
        })
      }
    }
}
</script>

<style scoped lang="scss">
.page {
    height: 100%;
    background-color: #ffffff;
    padding-bottom: 0;
}
.date-box {
    width: 100%;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    height: 72rpx;
    line-height: 72rpx;
    padding: 0 30rpx;
}

.list {
    border-radius: 4px;
    background-color: #ffffff;
    padding: 10px;
  .button {
    width: 50px;
    height: 27px;
    line-height: 27px;
    text-align: center;
    background: #ff443b;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    margin-left: 10px;
  }
    .item {
        font-size: 14px;
        color: #4a4a4a;
        border-bottom: 1px solid #eeeeee;
        padding: 10px 0;
        .value {
            margin: 0 20px;
        }
    }
}
</style>
